<template>
  <div>
      <!-- 结算标题 -->
     <van-nav-bar
       title="结算"
       left-arrow
       @click-left="$router.back()"
     />
     <!-- 收货地址 -->
     <vancell title='收货地址' name="浩浩" mobile="1333333333" dizhi='湖南省长沙市东方红大厦四楼黑马程序员' />
     <vancell title='配送方式' dizhi='快递上门 ￥10.00' />
     <!-- 优惠券模块 -->
     <discount />
     <!-- 购物车列表 -->
     <van-list
  v-model="loading"
  :finished="finished"
  @load="onLoad"
>
  <van-card
  :num="item.num"
  :price="item.shop.price*item.num"
  :desc="item.shop.content"
  :title="item.shop.title"
  :thumb="item.shop.photo"
  v-for="item in this.newlist" :key="item.id"
  >
  >
 <!-- <template #tag>
    <van-checkbox v-model="item.state" :icon-size="iconsize"></van-checkbox>
  </template> -->
</van-card>
</van-list>

<!-- 底部商品合计 -->
<van-submit-bar :price="allprice" button-text="提交订单" @submit="onSubmit">
  <!-- <template #label>
    <span>111</span>
  </template> -->
</van-submit-bar>
  </div>
</template>

<script>
import { getShopCarList, addBuyList } from '@/api/shopcar.js'
import vancell from './components/index.vue'
import discount from './components/discount.vue'
export default {
  name: 'Settlement',
  components: {
    vancell,
    discount
  },
  data () {
    return {
      Goodslist: [],
      list: [],
      newlist: [],
      loading: false,
      finished: false
      // shangpinid: this.$router.params.id
    }
  },
  created () {
    if (this.$route.params.id) {
      this.list = this.$route.params.id
    }
  },
  computed: {
    allprice () {
      let sum = 0
      this.newlist.forEach((obj) => {
        if (obj.id) {
          sum += obj.shop.price * obj.num
        }
      })
      console.log(sum)
      return sum * 100
    }
  },
  methods: {
    async onSubmit () {
      try {
        const a = await addBuyList({
          data: this.newlist[0]
        })
        console.log(a)
      } catch (error) {
        console.log(error)
      }
    },
    async  onLoad () {
      try {
        const id = this.$store.state.user.UserInfo.id
        const a = await getShopCarList({ userId: id })
        // 结算商品的id组成的数组
        // console.log(this.list)
        if (a.status === 200 && a.data.length !== 0) {
          this.loading = false
          this.finished = true
          // 所有购物车的商品列表组成的数组
          this.Goodslist = a.data
          // console.log(this.Goodslist)
          this.Goodslist.forEach(v => {
            this.list.filter(i => {
              if (v.id === i.id) {
                console.log(v)
                i.num = v.num
                return this.newlist.push(v)
              }
            })
          })
          console.log(this.newlist)
        }
      } catch (error) {
        console.log('获取购物车列表失败', error)
      }
    }
  }
}
</script>

<style scoped lang='less'>
/deep/ .van-nav-bar__content {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  .van-nav-bar__title{
    font-size: 20px;
    font-weight: 700;
  }
  span.van-nav-bar__text {
    font-size: 14px;
    color: black;
   }
   .van-icon{
    color:black
   }
}
.van-submit-bar__bar{
  background-color: #f2f2f2;
  .van-submit-bar__text{
    padding-right: 3rem;
  }
}
</style>
